<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style></style>
  </head>
  <body>
    <label>价格:2999.00</label>
    <button class="btn">打折</button>
    <script>
      // 封装一个通用的动画函数(时间(毫秒), 开始数值, 结束数值, 函数传值)
      function animation(duration, from, to, onProgress) {
        const dis = to - from; // 距离
        const speed = dis / duration; // 速度
        const startTime = Date.now(); // 开始时间
        let value = from; // 当前值 , 从起始值开始每隔一小段时间变化一次
        onProgress(value);

        // 变化的函数
        function _run() {
          const now = Date.now();
          const time = now - startTime; // 流逝的时间
          // 停止
          if (time >= duration) {
            value = to;
            onProgress(value);
            return;
          }
          const d = time * speed; // 变化的距离
          value = from + d;
          onProgress(value);
          requestAnimationFrame(_run);
        }
        requestAnimationFrame(_run);
      }

      //  打折数字滚动效果实现
      const label = document.querySelector("label");
      const btn = document.querySelector(".btn");
      btn.onclick = function () {
        animation(1000, 2999, 299, (val) => {
          label.textContent = `价格:${val.toFixed(2)}`;
        });
      };
    </script>
  </body>
</html>
